<script setup>
import ProductItem from "@/components/ProductItem.vue";
import useProductStore from "@/store/modules/ProductStore.js";
import {PRODUCT_ROUTE} from "@/router/routes/product/product.js";
import {useRouter} from "vue-router";
import {inject} from 'vue'

const router = useRouter()
const productStore = useProductStore()

const {
  productList,
  productListLoading,
  productListFinished,
  productListError,
  onLoadProductList,
  productListRefreshing,
  onRefreshProductList
} = inject('homeProduct')

// 前往商品详情页面
const goProductDetail = (idx) => {
  // 获取商品id
  const productId = productList.value[idx].id
  router.push({
    name: PRODUCT_ROUTE,
    query: {
      productId
    }
  })
}
</script>

<template>
  <div>
    <van-pull-refresh v-model="productListRefreshing" @refresh="onRefreshProductList">
      <van-list
          v-model:loading="productListLoading"
          v-model:error="productListError"
          :finished="productListFinished"
          finished-text="没有更多了"
          error-text="请求失败，点击重新加载"
          @load="onLoadProductList"
      >
        <div @click="goProductDetail(idx)" class="box-border p-2" v-for="(product, idx) in productList">
          <ProductItem :product="product"></ProductItem>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<style scoped lang="scss">

</style>